<!--

显示主要信息，
i:	 发射机编号
ii:	 发射机型号
iii: 站点
iv:	 输出功率进度条
v:	 信道号。
vi:	 模式。
vii: 频率。

-->


<script setup>
// 接收数据
const props = defineProps({
    selectedTransmitter: Object,
});


let selectedTransmitter = props.selectedTransmitter;



/**
 * 计算并获取功率百分比
 *
 * 根据给定的功率值和型号计算功率百分比
 * 不同的型号有不同的总功率，因此百分比的计算方式也不同
 *
 * @param {number} power - 当前功率值
 * @param {string} model - 型号
 * @returns {number} 返回计算得到的功率百分比
 */
function getProgressPercentage(power, model) {
    let percentage = 0;
    // 检查型号是否属于每小格250W的类型
    if (["JRS-553", "JRS-753", "JRS-853", "JRS-953"].includes(model)) {
        percentage = (power / 5000) * 100; // 计算百分比，总功率5000W
    } else if (["JRS-714", "JRS-914"].includes(model)) {
        percentage = (power / 10000) * 100; // 计算百分比，总功率10000W
    }
    return percentage;
}
// 百分之一百二转换成百分比
function getPercentage(value) {
    if (value > 120) {
        return 1
    }

    return value / 1.2
}

/**
 * 根据给定的功率百分比，返回对应的进度条颜色。
 * 
 * @param {number} percentage - 功率百分比，用于确定进度条的颜色。
 * @returns {string} - 返回进度条的颜色，颜色根据功率百分比确定。
 * 
 * 说明：
 * - 当功率百分比小于等于100%时，进度条颜色为绿色。
 * - 当功率百分比介于100%到110%之间时，进度条颜色为黄色。
 * - 当功率百分比大于等于110%时，进度条颜色为红色。
 */
function getProgressColor(percentage) {
    if (percentage <= 100) return "green";
    if (percentage <= 110) return "yellow";
    return "red";
}
</script>

<template>
    <!-- 功能状态 -->
    <el-card shadow="hover" class="card">

        <!-- 发射机编号，发射机型号，站点 信息展示-->
        <template #header>
            <div style="display: flex;justify-content: space-between;align-items: center;">
                <h1 style="font-size: 28px; margin: 0;">{{ selectedTransmitter.transmitter }}: {{
                    selectedTransmitter.model }}</h1>
                <p class="site">站点：万倾沙</p>
            </div>
        </template>

        <!-- 信道号，模式，频率 信息展示 -->
        <el-row class="info-use">
            <el-col class="middle_data" :span="6" :xs="24">
                <div>
                    <span>{{ selectedTransmitter.channel }}</span>
                    CH
                </div>
            </el-col>
            <el-col class="middle_data" :span="8" :xs="24">
                <div>
                    <span>{{ selectedTransmitter.mode }}</span>
                </div>
            </el-col>
            <el-col class="middle_data" :span="10" :xs="24">
                <div>
                    <span>{{ selectedTransmitter.frequency }}</span>
                    kHz
                </div>
            </el-col>
        </el-row>

        <!-- 输出功率进度条 -->
        <el-progress :percentage="getPercentage(getProgressPercentage(5500, selectedTransmitter.model))"
            stroke-width="10" :color="getProgressColor(getProgressPercentage(5500, selectedTransmitter.model))">
            <template #default>
                <span class="percentage-value">{{ Math.floor(getProgressPercentage(5500, selectedTransmitter.model)) }}%</span>
            </template>
        </el-progress>
    </el-card>
</template>

<style scoped>
.card {
    margin-bottom: 20px;
}

.card .info-use span {
    font-size: 50px;
    color: brown;
}

.card .info-use .middle_data {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 10px;
}
</style>